<template>
  <div id="globalHeader">
    <Row :wrap="false">
      <Col flex="auto">
        <Row :wrap="false">
          <div class="title-bar">
            <img class="logo" src="../../public/logo.png" />
            <div class="title">{{ title }}</div>
          </div>
          <Menu mode="horizontal" theme="dark" @on-select="selectMenu" class="menu">
            <MenuItem
              :name="item.name"
              v-for="item in visibleRoutes"
              :key="item.name"
              :class="{ 'menu-item-selected': selectedMenuItem === item.name }"
            >
              {{ item.name }}
            </MenuItem>
          </Menu>
        </Row>
      </Col>
      <Col>
        <Row style="display: flex; justify-content: center; align-items: center;padding: 0px 24px" :wrap="false">
          <Select v-model="searchMenu" style="width: 300px; margin: auto 16px" placeholder="搜索菜单..." @on-select="selectMenu" filterable clearable>
            <Option v-for="item in visibleRoutes" :value="item.name" :key="item.name">
              {{ item.name }}
            </Option>
          </Select>
          <Row type="flex" justify="space-around" style="margin-top: 8px">
            <Col>
              <Icon size="24" color="#515A6E" type="ios-alert" />
            </Col>
            <Col>
              <Icon size="24" color="#515A6E" type="md-help" />
            </Col>
            <Col>
              <a href="https://gitee.com/liang-tian-yu" target="_blank">
                <Icon size="24" color="#515A6E" type="logo-github"></Icon>
              </a>
            </Col>
          </Row>
          <Avatar class="avatar">{{ loginUser.userName.slice(0, 1) }}</Avatar>
          <!--<Avatar v-show='loginUser.avatarUrl' class="avatar" :src="loginUser.avatarUrl"></Avatar>-->
          <div>
            <Dropdown trigger="hover" @on-click="handleSelect">
              <span class="userName">{{ loginUser.userName ?? '未登录' }}</span>
              <DropdownMenu slot="list">
                <DropdownItem name="个人中心"
                  >个人中心
                  <Icon type="md-contact" />
                </DropdownItem>
                <DropdownItem name="退出账号"
                  >退出账号
                  <Icon type="md-backspace" />
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </Row>

        <Row v-show="!loginUser.userRole">
          <Button class="loginBtn" type="info" ghost @click="toLogin">登录</Button>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
import { appRouter } from '@/router/routes'
import { userLogout } from '@/api/user'
import checkAccess from '@/access/checkAccess'
import { title } from '@/enum'

export default {
  data() {
    return {
      title: title,
      selectedMenuItem: '主页',
      searchMenu: '',
    }
  },
  computed: {
    loginUser() {
      return this.$store.state.user.loginUser
    },
    visibleRoutes() {
      return appRouter.filter((item, index) => {
        if (item.meta) {
          if (item.meta.hideInMenu) {
            return false
          }
          //根据权限过滤菜单
          if (!checkAccess(this.$store.state.user.loginUser, item.meta.access)) {
            return false
          }
        }
        return true
      })
    },
  },
  methods: {
    selectMenu(active) {
      const targetRoute = active || this.visibleRoutes[0].name
      this.selectedMenuItem = targetRoute
      // 如果当前路由与目标路由不同，才执行路由跳转
      if (this.$route.name !== targetRoute) {
        this.$router.push({ name: targetRoute })
      }
    },
    async handleSelect(v) {
      if (v === '个人中心') {
        this.$router.push({ name: v })
      }
      if (v === '退出账号') {
        const res = await userLogout()
        if (res.code === 0) {
          this.$store.commit('userLogout')
          this.$Message.success('退出成功')
          this.$router.push('/user/login')
        }
      }
    },
    toLogin() {
      this.$router.push('/user/login')
    },
  },
  mounted() {
    this.selectedMenuItem = this.$route.name
  },
}
</script>

<style scoped>
@import '../global.css';

#globalHeader {
  color: #cbced4;
  padding: 0;
  height: 64px;
  line-height: 64px;
}

.title-bar {
  display: flex;
  align-items: center;
  padding-left: 24px;
}

.title {
  margin-left: 16px;
  margin-right: 48px;
  color: var(--color-text);
}

.logo {
  height: auto;
  width: 50px;
}

.avatar {
  color: #383535;
  background-color: #ffffff;
  margin-left: 20px;
  border: 1px solid #515a6e;
}

.loginBtn {
  margin-top: 15px;
}

/* 菜单样式优化 */
.menu {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  position: relative;
  height: 64px;
  line-height: 64px;
}

.menu-item-selected {
  position: relative;
  color: #151515 !important;
  font-weight: bold;
}

.menu-item-selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #adb4f8;
  transition: all 0.3s ease;
}

/* 菜单项悬停效果 */
:deep(.ivu-menu-item) {
  transition: all 0.3s ease;
  height: 64px;
  line-height: 64px;
}

:deep(.ivu-menu-item:hover) {
  color: #adb4f8 !important;
}

:deep(.ivu-menu-item:hover::after) {
  background-color: #adb4f8;
}

.userName {
  margin-left: 16px;
  color: var(--color-text);
}

/* 使用媒体查询隐藏 logo */
@media (max-width: 712px) {
  .logo {
    display: none;
  }
}
</style>
